<template>
  <div class="app-main-view" v-loading="loading">
    <the-top-bar />
    <div class="app-main-content">
      <the-menu />
      <div class="app-main__micro">
        <the-nav />
        <micro-app
          class="app-main__micro-content"
          :name="state.module"
          :url="state.url"
          iframe
          @created="created"
          @beforemount="beforemount"
          @mounted="mounted"
          @unmount="unmount"
          @error="error"
        ></micro-app>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
import { useBaseStore } from '@/stores/base'
import TheTopBar from '@/components/base/layout/header/TheTopBar.vue'
import TheMenu from '@/components/base/layout/menu/TheMenu.vue'
import TheNav from '@/components/base/layout/nav/Index.vue'

const baseStore = useBaseStore()

const loading = ref(false)
const state = reactive({
  module: null,
  url: null
})
// const appControl = ref(false)

watch(
  () => baseStore.getPlatformActive(),
  (value) => {
    state.module = value?.module
    state.url = value?.url
  },
  {
    immediate: true,
    deep: true
  }
)
// watch(
//   () => baseStore.getAppControl(),
//   (value) => {
//     appControl.value = value
//   },
//   {
//     immediate: true,
//     deep: true
//   }
// )

// microapp 生命周期
const created = () => {
  //   baseStore.setAppControl(true)
  console.log('created')
}
const beforemount = () => {
  console.log('beforemount')
}
const mounted = () => {
  console.log('mounted')
}
const unmount = () => {
  console.log('unmount')
}
const error = () => {
  console.log('error')
}
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
